<template>
    <div class="">
        <CommonTitle titleName="项目基本信息"></CommonTitle>
        <div class="content m-t20">
            <el-form
                    :model="formInline"
                    ref="formInlineRef"
                    class="demo-form-inline"
                    label-width="180px"
                    :disabled="true"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="项目名称">
                            <el-input
                                    v-model="formInline.projectName"
                                    placeholder="项目名称"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目编号">
                            <el-input
                                    v-model="formInline.projectCode"
                                    placeholder="项目编号"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="关联项目集">
                            <el-select
                                    v-model="formInline.projectSetId"
                                    clearable
                                    placeholder="关联项目集"
                            >
                                <el-option
                                        v-for="item in state.projectSetIdList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目分类">
                            <el-select
                                    v-model="formInline.projectTypeId"
                                    clearable
                                    placeholder=""
                            >
                                <el-option
                                        v-for="item in state.typeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value+''"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="业务单元">
                            <el-select
                                    v-model="formInline.businessUnit"
                                    clearable
                                    placeholder="业务单元"
                            >
                                <el-option
                                        v-for="item in businessUnitArr"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value+''"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="计划实施时间范围">
                            <el-date-picker
                                    v-model="formInline.time"
                                    type="datetimerange"
                                    size="large"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    format="YYYY/MM/DD"
                                    value-format="YYYY-MM-DD"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目位置">
                            <el-input v-model="formInline.address"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目详细地址">
                            <el-input v-model="formInline.streetName"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item class="col_h" label="拟计划总投额和实际总投额">
                            <el-input v-model="formInline.projectActual"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目立项部门" prop="">
                           <el-input v-model="formInline.responsibleDepartmentName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目负责人" prop="">
                           <el-input v-model="formInline.responsibleUserName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属业态" prop="typeOfBusiness">
                            <el-select
                                    v-model="formInline.typeOfBusiness"
                                    clearable
                                    placeholder="所属业态"
                            >
                                <el-option
                                        v-for="item in state.typeofBusinessList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="总面积(m²)" prop="projectArea">
                            <el-input  v-model="formInline.projectArea" placeholder="暂无"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="政府项目" prop="isGovernment">
                            <el-radio-group v-model="formInline.isGovernment" class="ml-4">
                                <el-radio :label="0" size="large">否</el-radio>
                                <el-radio :label="1" size="large">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="项目摘要" prop="">
                            <el-input
                                    v-model="formInline.projectSummary"
                                    show-word-limit
                                    placeholder="暂无"
                                    type="textarea"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目创建时间" prop="">
                            <el-input v-model="formInline.createTime"> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目创建人" prop="">
                            <el-input v-model="formInline.createUserName"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import {
    ElForm,
    ElRow,
    ElCol,
    ElSelect,
    ElDatePicker,
    ElFormItem,
    ElOption,
    ElRadioGroup,
    ElRadio
} from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import { businessUnitArr } from "@/common/dict/dictCollect.js";
import {
    projectConfigApi,
    newApi,
} from "@/api/project";
import {getURLhandler} from "@/views/constructionProjectManage/static/utools";
import {useRoute} from "vue-router";
import {limitInputNum} from "@/common/utils/GlobalUtils";

const route = useRoute();
const state = reactive({
    typeofBusinessList: [
        {
            label: '养老',
            value: '1'
        },
        {
            label: '教育',
            value: '2'
        },
        {
            label: '医疗',
            value: '3'
        },
        {
            label: '农贸',
            value: '4'
        },
        {
            label: '综合体',
            value: '5'
        },
        {
            label: '绿道',
            value: '6'
        },
        {
            label: '文体',
            value: '7'
        },
        {
            label: '子公司',
            value: '8'
        },
        {
            label: '其他',
            value: '9'
        }
    ],
    projectSetIdList: [],
    typeList: [],
    departmentPersonList: [],
    allDepartmentList: [],
});
const formInline = ref({});

const handelChangeTime = (e) => {
    if (e && e.length > 0) {
        formInline.value.predictStartTime = e[0];
        formInline.value.predictEndTime = e[1];
    }
};

// 获取项目集
const getPublicProject = () => {
    projectConfigApi.getProjectSets().then((res) => {
        if (res.code === '200') {
            state.projectSetIdList = res.data.map((item) => {
                return {
                    label: item.projectSetName,
                    value: item.projectSetId,
                };
            });
        }
    });
};

/**
 * 大数据跳转项目基础信息
 */
const getBigDataProjectDetail = () => {
    newApi.getBigDataProjectDetail({projectId:getURLhandler(route.path).projectId}).then(res=>{
        if(res.code==='200'){
            formInline.value = res.data;
            formInline.value.time = [res.data.predictStartTime,res.data.predictEndTime];
            formInline.value.projectActual = `${formInline.value.projectAmount || 0}/${formInline.value.realProjectAmount || 0}`;
        }
    })
}

const getTypeList = () => {
    projectConfigApi.getTypeList('').then((res) => {
        if (res.code === '200') {
            state.typeList = res.data.map((item) => {
                return {
                    label: item.typeName,
                    value: item.projectTypeId,
                };
            });
        }
    });
};

onMounted(() => {
    getPublicProject();
    getTypeList();
    getBigDataProjectDetail();
});
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 504px;
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 40px;
}
.el-select {
  width: 100%;
}
</style>
